<%@ Page Language="C#" MasterPageFile="~/_Templates/MasterPages/Default.master" AutoEventWireup="true" CodeFile="resize.aspx.cs" Inherits="image_manipulation_resize" Title="Untitled Page" %>
<asp:Content ID="MainContent" ContentPlaceHolderID="MainContentPlaceHolder" Runat="Server" EnableViewState="false">

<h1>Image Manipulation</h1>
<h2>Resize</h2>
<p>DNAide provides the <strong>ImageResize</strong> control for simplifying resizing images. The resize control inherits from the <strong>ImageTransform</strong> control - so in addition to basic resizing you can also hook into and apply additional filters / transformations as part of your resize. See <a href="filters.aspx">filters</a> for applying advanced filters on your images.</p>
<p>These demo's use the default <strong>WriteOption</strong> of <strong>OverwriteIfSourceIsNewer</strong>. So once the resized image is created, the control will not resize with each new request until either the resized image is deleted or the source image is updated / newer than the resized image.</p>

<h3>Original Image</h3>
<img src="../_client/images/newyork.jpg" width="720" height="470" />

<h3>Resized to 400x400 maintaining aspect ratio</h3>

<pre class="csharpcode">
<span class="kwrd">&lt;</span><span class="html">DNAide:ImageResize</span> <span class="attr">ID</span><span class="kwrd">="Resize1"</span> <span class="attr">runat</span><span class="kwrd">="server"</span> <span class="attr">SourceFileName</span><span class="kwrd">="~/_client/images/newyork.jpg"</span> 
  <span class="attr">NewWidth</span><span class="kwrd">="400"</span> <span class="attr">NewHeight</span><span class="kwrd">="400"</span> <span class="kwrd">/&gt;</span></pre>

<DNAide:ImageResize ID="Resize1" runat="server" SourceFileName="~/_client/images/newyork.jpg" NewWidth="400" NewHeight="400" OutputFileName="Resize1.jpg" />


<h3>Resized to 400x400 exact</h3>
<pre class="csharpcode">
<span class="kwrd">&lt;</span><span class="html">DNAide:ImageResize</span> <span class="attr">ID</span><span class="kwrd">="Resize2"</span> <span class="attr">runat</span><span class="kwrd">="server"</span> <span class="attr">SourceFileName</span><span class="kwrd">="~/_client/images/newyork.jpg"</span> 
  <span class="attr">NewWidth</span><span class="kwrd">="400"</span> <span class="attr">NewHeight</span><span class="kwrd">="400"</span> <span class="attr">MaintainAspectRatio</span><span class="kwrd">="false"</span> <span class="attr">OutputFileName</span><span class="kwrd">="Resize2.jpg"</span> <span class="kwrd">/&gt;</span></pre>

<DNAide:ImageResize ID="Resize2" runat="server" SourceFileName="~/_client/images/newyork.jpg" NewWidth="400" NewHeight="400" MaintainAspectRatio="false" OutputFileName="Resize2.jpg" OutputWriteOption="OverwriteIfSourceIsNewer" />


<h3>Resizing onto another image</h3>
<p>In addtion to basic resizing, you can resize an image onto a background image.</p>
<pre class="csharpcode">
<span class="kwrd">&lt;</span><span class="html">DNAide:ImageResize</span> <span class="attr">ID</span><span class="kwrd">="Resize3"</span> <span class="attr">runat</span><span class="kwrd">="server"</span> <span class="attr">SourceFileName</span><span class="kwrd">="~/_client/images/newyork.jpg"</span> 
  <span class="attr">BackgroundSourceFileName</span><span class="kwrd">="~/_client/images/frame.jpg"</span> 
  <span class="attr">NewHeight</span><span class="kwrd">="300"</span> <span class="attr">NewWidth</span><span class="kwrd">="300"</span>
  <span class="attr">DrawPosition</span><span class="kwrd">="CenterCenter"</span> <span class="attr">OutputFileName</span><span class="kwrd">="Resize3.jpg"</span> <span class="kwrd">/&gt;</span></pre>

<DNAide:ImageResize ID="Resize3" runat="server" SourceFileName="~/_client/images/newyork.jpg" BackgroundSourceFileName="~/_client/images/frame.jpg" NewHeight="300" NewWidth="300" DrawPosition="CenterCenter" OutputFileName="Resize3.jpg" />


</asp:Content>

